<template>
    <div class="status">
        <div class="left">
            <div class="left-top">
                <div class="left1">
                    <div class="title">开竣工情况</div>
                    <div id="main1"></div>
                </div>
                <div class="right">
                    <div class="text1">
                        <img src="@/assets/images/blue.png" alt="">
                        新开工
                    </div>
                    <div class="text2">
                        <img src="@/assets/images/blue.png" alt="">
                        新竣工
                    </div>
                    <div id="main2"></div>
                    <div id="main3"></div>
                    <div class="bb">
                        <p>
                            <span style="width:100px">计划新开工</span>
                            <span class="number">200</span>
                        </p>
                        <p>
                            <span style="width:100px">已开工</span>
                            <span class="number">140</span>
                        </p>
                    </div>
                    <div class="bb2">
                        <p>
                            <span style="width:100px">计划新竣工</span>
                            <span class="number">200</span>
                        </p>
                        <p>
                            <span style="width:100px">已竣工</span>
                            <span class="number">140</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="line"></div>
            <div class="left-bottom">
                <div class="bot_tab">
                    <div style="background-color: #0d91ff; color:#fff">本季度项目开工清单</div>
                    <div>下季度项目开工清单</div>
                    <div>本季度项目竣工清单</div>
                    <div>下季度项目竣工清单</div>
                </div>
                <el-table
                    class="main4"
                    :data="tableData"
                    style="width: 100%;"
                    height="300px"
                    :header-cell-style="{ 
                    background:'#f8f7fc',color:'#2f2f2f',}">
                    <el-table-column
                        prop="number"
                        align="center"
                        label="序号"
                        height="20"
                        width="50">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        align="center"
                        label="项目名称"
                        style="text-align: center"
                        width="250">
                    </el-table-column>
                    <el-table-column
                        prop="plan_start"
                        align="center"
                        label="计划开工时间">
                    </el-table-column>
                    <el-table-column
                        prop="plan_end"
                        align="center"
                        label="计划竣工时间">
                    </el-table-column>
                    <el-table-column
                        prop="rel_start"
                        align="center"
                        label="实际开工时间">
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="right2">
            <div class="right_top">
                <div class="title">投资入库情况</div>
                <div class="main5">
                    <div id="main5"></div>
                    <div class="blue"></div>      
                </div>
                <div class="main6">
                    <div id="main6"></div>  
                    <div class="yellow"></div>   
                </div>
                <div class="box">
                    <p>
                        <span class="icon-wancheng1"></span>
                        <span class="word">年度计划投资</span>
                        <span class="number">206</span>
                    </p>
                    <p>
                        <span class="icon-wancheng1"></span>
                        <span class="word">完成形象投资</span>
                        <span class="number">123</span>
                    </p>
                    <p>
                        <span class="icon-wancheng1"></span>
                        <span class="word">完成入库投资</span>
                        <span class="number">82</span>
                    </p>
                </div>  
            </div>     
            <div class="line"></div>
            <div class="right_bottom">
                <div class="bot_tab">
                    <div style="background-color: #0d91ff; color:#fff">本季度入库项目清单</div>
                    <div>下季度入库项目清单</div>
                </div>
                <el-table
                    class="main7"
                    :data="tableData2"
                    style="width: 100%;"
                    height="300px"
                    :header-cell-style="{ 
                    background:'#f8f7fc',color:'#2f2f2f',}">>
                    <el-table-column
                        prop="number"
                        align="center"
                        label="序号"
                        height="20"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        align="center"
                        label="项目名称"
                        style="text-align: center"
                        width="300">
                    </el-table-column>
                    <el-table-column
                        prop="plan_start"
                        align="center"
                        label="计划入库时间">
                    </el-table-column>
                    <el-table-column
                        prop="rel_start"
                        align="center"
                        label="实际入库时间">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import * as echarts from 'echarts';
import 'echarts-liquidfill';
export default {
   //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
  //这里存放数据
    return {
        option : {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                bottom: '5%',
                left: 'center',
                icon:'circle',
                data:['在建中','已入库','已完工','未开工',],
                seleted:{
                    'Video Ads':false
                }
            },
            color:['#3399fe','#47ce65','#ffa300','#fa535d','#fff'],
            series: [
                {
                name: 'Access From',
                type: 'pie',
                radius: ['30%', '70%'],
                avoidLabelOverlap: false,
                startAngle:200,
                labelLine:{  
                     // 统一设置指示线长度
                    length:45, 
                    show:true  
                },
                label: {
                    show: false,
                    position: 'center'
                },
                data: [
                    { value: 250, name: '在建中' },
                    { value: 120, name: '已入库' },
                    { value: 100, name: '已完工' },
                    { value: 180, name: '未开工' },
                    { value: 420, name: 'Video Ads' },
                ]
                }
            ]
        },
        option2 : {
        backgroundColor: '#fff',
        series: [{
            type: 'liquidFill',
            name: '全省',
            radius: '60%',
            top:"20px",
            color:'#47ce35',
            backgroundStyle: {
                borderWidth: 1,
                color: 'rgba(70,207,101,.5)',
            },
            //调整大小
            shape: 'circle',
            //修改形状，目前支持	'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            outline: {
            borderDistance: 0,
            //内环padding值
            itemStyle: {
                borderWidth: 2,
                //圆边线宽度
                borderColor: '#b0cdb9',
            },
            },
            data: [{
                'value': '0.7',
                color: ['#46cf65']
            }],
            //其中第一个数值由键值对表示
            label: {
            normal: {
                textStyle: {
                fontSize: 10,
                color: '#e9ea00',
                insideColor: '#e9ea00',
                }
            }
            }
        }]
        },
        option3 : {
        backgroundColor: '#fff',
        series: [{
            type: 'liquidFill',
            name: '全省',
            radius: '60%',
            top:"20px",
            color: [
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                {
                    offset: 0,
                    color: '#f1cd52',
                },
                {
                    offset: 1,
                    color: '#f1cd52',
                },
                ],
                    globalCoord: false,
                },
            ], //波浪颜色
            backgroundStyle: {
                borderWidth: 1,
                color: 'rgba(241,205,82,.5)',
            },
            //调整大小
            shape: 'circle',
            //修改形状，目前支持	'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            outline: {
            borderDistance: 0,
            //内环padding值
            itemStyle: {
                borderWidth: 2,
                //圆边线宽度
                borderColor: '#f2df92',
            },
            },

            // backgroundStyle: {
            //     // 内图 背景色 边
            //     color: '#f1cd52',
            // },
            data: [{
                'value': '0.35',
                color: ['#46cf65']
            }],
            //其中第一个数值由键值对表示
            label: {
            normal: {
                textStyle: {
                fontSize: 10,
                color: '#52698b',
                insideColor: '#e9ea00',
                }
            }
            }
        }]
        },
        tableData: [
            {
                number: 1,
                name: '江山中学现代化校园建设工程',
                plan_start: '2022-06',
                plan_end:'2024-11',
                rel_start:'2022-07-15'
            },
            {
                number: 2,
                name: '江山中学现代化校园建设工程',
                plan_start: '2022-06',
                plan_end:'2024-11',
                rel_start:'2022-07-15'
            }, 
            {
                number: 3,
                name: '江山中学现代化校园建设工程',
                plan_start: '2022-06',
                plan_end:'2024-11',
                rel_start:'2022-07-15'
            }, 
            {
                number: 4,
                name: '江山中学现代化校园建设工程',
                plan_start: '2022-06',
                plan_end:'2024-11',
                rel_start:'2022-07-15'
            },
            {
                number: 5,
                name: '江山中学现代化校园建设工程',
                plan_start: '2022-06',
                plan_end:'2024-11',
                rel_start:'2022-07-15'
            },
            {
                number: 6,
                name: '江山中学现代化校园建设工程',
                plan_start: '2022-06',
                plan_end:'2024-11',
                rel_start:'2022-07-15'
            },
            {
                number: 7,
                name: '江山中学现代化校园建设工程',
                plan_start: '2022-06',
                plan_end:'2024-11',
                rel_start:'2022-07-15'
            },
            {
                number: 8,
                name: '江山中学现代化校园建设工程',
                plan_start: '2022-06',
                plan_end:'2024-11',
                rel_start:'2022-07-15'
            },
            {
                number: 9,
                name: '江山中学现代化校园建设工程',
                plan_start: '2022-06',
                plan_end:'2024-11',
                rel_start:'2022-07-15'
            },
        ],
        tableData2: [
            {
                number: 1,
                name: '江山中学现代化校园建设工程',
                plan_start: '2022-06',
                rel_start:'2022-07-15'
            },
            {
                number: 2,
                name: '江山中学现代化校园建设工程',
                plan_start: '2022-06',
                rel_start:'2022-07-15'
            }, 
            {
                number: 3,
                name: '江山中学现代化校园建设工程',
                plan_start: '2022-06',
                rel_start:'2022-07-15'
            }, 
            {
                number: 4,
                name: '江山中学现代化校园建设工程',
                plan_start: '2022-06',
                rel_start:'2022-07-15'
            },
            {
                number: 5,
                name: '江山中学现代化校园建设工程',
                plan_start: '2022-06',
                rel_start:'2022-07-15'
            },
            {
                number: 6,
                name: '江山中学现代化校园建设工程',
                plan_start: '2022-06',
                rel_start:'2022-07-15'
            },
            {
                number: 7,
                name: '江山中学现代化校园建设工程',
                plan_start: '2022-06',
                rel_start:'2022-07-15'
            },
            {
                number: 8,
                name: '江山中学现代化校园建设工程',
                plan_start: '2022-06',
                rel_start:'2022-07-15'
            },
            {
                number: 9,
                name: '江山中学现代化校园建设工程',
                plan_start: '2022-06',
                rel_start:'2022-07-15'
            },
        ],
        option5 : {
        backgroundColor: '#fff',
        title:{
            text:'完成形象投资',
            left:'center',
            top:'88%',
            textStyle:{
                fontSize:14,
                fontWeight:'normal',
                color:'#bdc1c4'
            }
        },
        series: [{
            type: 'liquidFill',
            name: '全省',
            radius: '100%',
            top:"20px",
            color: [
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                {
                    offset: 0,
                    color: '#446bf5',
                },
                {
                    offset: 1,
                    color: '#2ca3e2',
                },
                ],
                    globalCoord: false,
                },
            ], //波浪颜色
            backgroundStyle: {
                borderWidth: 1,
                color: 'rgba(54,152,251,.6)',
            },
            //调整大小
            shape: 'circle',
            //修改形状，目前支持	'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            outline: {
            borderDistance: 0,
            //内环padding值
            itemStyle: {
                borderWidth: 2,
                //圆边线宽度
                borderColor: '#7697b6',
            },
            },

            // backgroundStyle: {
            //     // 内图 背景色 边
            //     color: '#3698fb',
            // },
            data: [{
                'value': '0.7',
                color: ['#46cf65']
            }],
            //其中第一个数值由键值对表示
            label: {
            normal: {
                textStyle: {
                fontSize: 20,
                color: '#3698fb',
                insideColor: '#3698fb',
                }
            }
            }
        }]
        },
        option6 : {
        backgroundColor: '#fff',
        title:{
            text:'完成入库投资',
            left:'center',
            top:'88%',
            textStyle:{
                fontSize:14,
                fontWeight:'normal',
                color:'#bdc1c4'
            }
        },
        series: [{
            type: 'liquidFill',
            name: '全省',
            radius: '100%',
            top:"20px",
            color: [
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                {
                    offset: 0,
                    color: '#f1cd52',
                },
                {
                    offset: 1,
                    color: '#f1cd52',
                },
                ],
                    globalCoord: false,
                },
            ], //波浪颜色
            backgroundStyle: {
                borderWidth: 1,
                color: 'rgba(241,205,82,.5)',
            },
            //调整大小
            shape: 'circle',
            //修改形状，目前支持	'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            outline: {
            borderDistance: 0,
            //内环padding值
            itemStyle: {
                borderWidth: 2,
                //圆边线宽度
                borderColor: '#f2df92',
            },
            },

            // backgroundStyle: {
            //     // 内图 背景色 边
            //     color: '#f1cd52',
            // },
            data: [{
                'value': '0.6',
                color: ['#46cf65']
            }],
            //其中第一个数值由键值对表示
            label: {
            normal: {
                textStyle: {
                fontSize: 20,
                color: '#e9ea00',
                insideColor: '#e9ea00',
                }
            }
            }
        }]
        }
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    
  },
  beforeCreate() {}, //生命周期 - 创建之前
  created() {}, //生命周期 - 创建完成（可以访问当前this实例）
  beforeMount() {}, //生命周期 - 挂载之前
  mounted() {
    var chartDom = document.getElementById('main1');
    var chartDom2 = document.getElementById('main2');
    var chartDom3 = document.getElementById('main3');
    var chartDom5 = document.getElementById('main5');
    var chartDom6 = document.getElementById('main6');
    var myChart = echarts.init(chartDom);
    var myChart2 = echarts.init(chartDom2);
    var myChart3 = echarts.init(chartDom3);
    var myChart5 = echarts.init(chartDom5);
    var myChart6 = echarts.init(chartDom6);
    var option;
    var option2;
    var option3;
    var option5;
    var option6;
    option=this.option
    option2=this.option2
    option3=this.option3
    option5=this.option5
    option6=this.option6
    option && myChart.setOption(option);
    option2 && myChart2.setOption(option2);
    option3 && myChart3.setOption(option3);
    option5 && myChart5.setOption(option5);
    option6 && myChart6.setOption(option6);
    let sizeFun=function(){
        myChart.resize();  
        myChart2.resize();  
        myChart3.resize();
        myChart5.resize();
        myChart6.resize();
    }
    window.addEventListener("resize",sizeFun);
  }, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped lang="less">
@import url('@/assets/icons/iconfont.css');
@import url('@/assets/fonts/font.css');
.status{
    display: flex;
    margin-top: 20px;
    .left{
        width: 50%;
        // margin-right: 10px;
        margin-left: 10px;
        background-color: #fff;
        box-shadow: 0px 9px 17px -13px #e4e4e4;
        .line{
            width: 100%;
            height: .3px;
            background-color: #ccc;
        }
        .left-top{
            // margin-left: 10px;
            display: flex;
            .left1{
                width: 50%;
                position: relative;
                .title{
                    font-size: 14px;
                    font-weight: bold;
                    margin: 10px 0 10px 20px;
                    color: #000;
                }
                .title::before{
                    content:'';
                    position: absolute;
                    width: 4px;
                    height: 15px;
                    background-color: #008aff;
                    top: 12px;
                    left: 8px;
                }
                #main1{
                    width: 100%;
                    height: 300px;
                }
            }
            .right::before{
                content: '';
                width: 1px;
                height: 180px;
                background-color: #ccc;
                position: absolute;
                top: 80px;
                left: -20px;
            }
            .right{
                width: 50%;
                position: relative;
                img{
                    width: 15px;
                    height: 15px;
                    vertical-align: middle;
                }
                .text1,.text2{
                    position: absolute;
                    font-size: 12px;
                    font-weight: bold;
                    top: 20px;
                    z-index: 22;
                }
                .text2{
                    top: 180px;
                }
                #main2,#main3{
                    width: 60%;
                    height: 160px;
                }
                .bb,.bb2{
                    position: absolute;
                    top:60px;
                    right: 30px;
                    width: 157px;
                    height: 65px;
                    p{
                        display: flex;
                        margin-bottom: 20px;
                        span{
                            display: block;
                            color: #000;
                            font-weight: bold;
                            margin-left: 20px;
                        }
                        .number{
                            color: #128ddb;
                            font-weight: 300;
                            font-family: Digital;
                        }
                    }
                }
                .bb2{
                    top:220px;
                }
            }
        }
        .left-bottom{
            padding: 10px;
            .bot_tab{
                margin-left: 10px;
                display: flex;
                div{
                    padding: 5px;
                    border: 1px solid #ccc;
                    color: #ccc;
                    font-size: 12px;
                    cursor: pointer;
                }
            }
            .main4{
                width: 100%;
                height: 300px;
                text-align: center;
                font-size: 13px;
                margin-top: 20px;
                overflow-y: inherit;
                ::v-deep.el-table--scrollable-y ::-webkit-scrollbar {
                display: none;
                }
            }
        }
    }
    .right2{
        width: 50%;
        margin-left: 10px;
        margin-right: 10px;
        background-color: #fff;
        box-shadow: 0px 9px 17px -13px #e4e4e4;
        overflow: hidden;
        .line{
            width: 100%;
            height: .3px;
            background-color: #ccc;
        }
        .right_top{
            display: flex;
            position: relative;
            margin-bottom: 19px;
            .title{
                font-size: 14px;
                font-weight: bold;
                margin: 10px 0 10px 20px;
                color: #000;
            }
            .main5,.main6{
                width: 24%;
            }
            .main5{
                margin-right: 50px;
                .blue{
                    width: 100%;
                    height: 1px;
                    background-color:#3698fb;
                    position: relative;
                    bottom: 15%;
                    z-index: 66;
                }
            }
            #main5,#main6{
                width: 100%;
                height: 320px;
            }
            .yellow{
                width: 100%;
                height: 1px;
                background-color:#f1cd52;
                position: relative;
                bottom: 15%;
                z-index: 66;
             }
             .box{
                margin-left: 50px;
                margin-top: 100px;
                p{
                    margin-top: 15px;
                    span{
                        margin-right: 10px;     
                    }
                    .icon-wancheng1{
                        color: #21b658;
                    }
                    .word{
                        font-weight: bold;
                    }
                    .number{
                        color:#128ddb;
                        font-family: Digital;
                    }
                }
             }
        }
        .right_bottom{
            padding: 10px;
            .bot_tab{
                margin-left: 10px;
                display: flex;
                div{
                    padding: 5px;
                    border: 1px solid #ccc;
                    color: #ccc;
                    font-size: 12px;
                    cursor: pointer;
                }
            }
            .main7{
                width: 100%;
                height: 300px;
                text-align: center;
                font-size: 13px;
                margin-top: 20px;
                overflow-y: inherit;
                ::v-deep.el-table--scrollable-y ::-webkit-scrollbar {
                display: none;
                }
            }
        }
    }
}
</style>